<template>
  <div class="cardStyle">
    <div>
      <Query  v-model:organizationList="organizationList"  v-model:customer_category="customer_category"  v-model:currency="currency"  v-model:settle_type="settle_type"  v-model:invoice_type="invoice_type"  v-model:account_country="account_country"  v-model:settlement_type="settlement_type"  v-model:customerGroupList="customerGroupList"  v-model:formData="formData" v-model:type="type" v-model:typeNumber_1="typeNumber_1" v-model:typeNumber_2="typeNumber_2" />
    </div>
    <div>
      <el-card>
        <template #header>
          <div class="customerTitle1">
            <div class="leve2_title">客户明细列表</div>
            <div >
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="shareOpen"
              >
                分配使用组织
              </el-button>
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="customGroupingOpen"
              >
                客户分组
              </el-button>
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="customClassifyOpen"
              >
                客户分类
              </el-button>
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="renew"
              >
                更新
              </el-button>
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="copy"
              >
                复制
              </el-button>
              <el-button type="primary" @click="create">
                新建
              </el-button>
            </div>
          </div>
        </template>
        <div class="customerTable">
          <el-table
            v-loading="loading"
            load="false"
            ref="multipleTableRef"
            border
            :data="tableData"
            height="450px"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" align="center" width="80">
              <template #default="scope">
            <span
              v-text="(currentPage - 1) * pageSize + (scope.$index + 1)"
            ></span>
              </template>
            </el-table-column>
            <el-table-column
              empty-text="--"
              label="使用组织"
              prop="org_name"
              min-width="230"

            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.org_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户编码"
              prop="number"
              width="130"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.number, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户名称"
              prop="name"
              min-width="220"
            >
              <template #default="scope">
                <span  style="text-align: left;" class="nameStyle link ellipsis" @click="info_list(scope.row)">
                  {{ scope.row.name || "--" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户状态"
              prop="status"
              width="100"
            >
              <template #default="scope">
                <span>
                  {{ status_name(scope.row.status) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户类别"
              prop="cust_type_name"
              width="150"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.cust_type_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="客户分组"
              prop="primary_group_name"
              show-overflow-tooltip
              width="150"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.primary_group_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否为集团客户"
              prop="is_group"
              width="130"
            >
              <template #default="scope">
                <el-tag
                  :type="scope.row.is_group === 1 ? 'success' : 'danger'"
                  disable-transitions
                >{{ scope.row.is_group == 1 ? '是' : '否' }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="结算币别"
              prop="trading_curr_name"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.trading_curr_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="价目表"
              prop="price_list_name"
              width="80"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.price_list_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="价目表编码"
              prop="price_list_number"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.price_list_number, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="发票类型"
              prop="invoice_type_name"
              width="150"
            >
              <template #default="scope">
                <span class="ellipsis">{{ scope.row.invoice_type_name && scope.row.invoice_type_name == 0 ? '--' : scope.row.invoice_type_name || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否启用信用管理"
              prop="is_credit_check"
              width="140"
            >
              <template #default="scope">
                <el-tag
                  :type="scope.row.is_credit_check === 1 ? 'success' : 'danger'"
                  disable-transitions
                >{{ scope.row.is_credit_check == 1 ? '是' : '否' }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              label="创建人"
              prop="create_name"
              width="80"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.create_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建组织"
              prop="create_org_name"
              width="210"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.create_org_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="create_date"
              min-width="180"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.create_date, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新人"
              prop="update_name"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.update_name, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新组织"
              prop="modify_use_org"
              width="100"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.modify_use_org, '')"
              ></span>
              </template>
            </el-table-column>
            <el-table-column
              label="更新时间"
              prop="update_date"
              min-width="180"
            >
              <template #default="scope">
              <span
                class="ellipsis"
                v-text="_FieldFormat(scope.row.update_date, '')"
              ></span>
              </template>
            </el-table-column>
          </el-table>
          <!-- hide-on-single-page-->
          <div class="customerPagination">
            <el-pagination
              background
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              layout="total, prev, pager, next,sizes, jumper"
              :page-sizes="[20, 50, 100, 200]"
              small="small"
              :total="count_number"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            />
          </div>
        </div>
      </el-card>
    </div>
    <ShareOrganization
      v-model:organizationList="organizationList"
      v-model:customer_category="customer_category"
      v-model:customerGroupList="customerGroupList"
      v-model:dialogVisible="dialogVisible"
      v-model:multipleDate="multipleDate"
      v-model:statusType="statusType"
    />
    <AllocationOrganization
      v-model:organizationList="organizationList"
      v-model:dialogVisible="dialogVisible1"
      v-model:multipleDate="multipleDate"
      v-model:statusType="statusType"
    />
  </div>
</template>

<script setup lang="ts">
import { organization_list } from "/@/api/dms/organization";

defineOptions({
  name: 'Customer',
})
import { customer_list } from '/@/api/dms/customer'
// import customerStore from "/@/views/customerIndex/storeList.";
import router from '/@/router'
import ShareOrganization from './component/ShareOrganization.vue'
import AllocationOrganization from './component/AllocationOrganization.vue'
import { ElMessage, ElTable } from 'element-plus'
import { ref } from 'vue'
import Query from '/@/views/customerIndex/component/Query.vue'
import { options_list } from "/@/api/dms/options";
import { customerGroup_list } from "/@/api/dms/customerGroup";
import { FieldFormat } from "/@/utils/utils";
const formData = ref({
  use_org_id: '1',
  number: '',
  name: '',
  forbid_status: '',
  cust_type_id: '1',
  primary_group: ['0','101728','101729','101730','101731','101733','101734'],
})
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const pageSize = ref(20)
let type = ref(null)
const currentPage = ref(1)
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const count_number = ref(0)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const loading = ref(true)
const typeNumber_1 = ref(0)
const typeNumber_2 = ref(0)
// const store_list = customerStore()
let tableData = reactive<any>([])
//接收多选数据
let multipleDate = reactive<any>([])
//判断点击弹窗
const statusType = ref(1)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  get_customer_list()
}
// 多选 属性
const handleSelectionChange = (val: any, va: any) => {
  multipleDate = val
  // multipleDate1 = val
}
const status_name = (va: any) => {
  if (va == 0) {
    return '暂存'
  } else if (va == 1) {
    return '待审核'
  } else if (va == 2) {
    return '已审核'
  } else if (va == 3) {
    return '待完善'
  } else if (va == 4) {
    return '已更新'
  } else {
    return '--'
  }
}
// 列表
const get_customer_list = async (item: any = 0) => {
  loading.value = true
  await customer_list({ pagesize: pageSize.value, page: currentPage.value, ...formData.value,primary_group:formData.value.primary_group.toString()}).then((data: any) => {
    if (data.code == 200) {
      tableData = data.data.list
      count_number.value = data.data.count
      loading.value = false
      if (item == 1) {
        type.value = null
        ElMessage({
          message: '查询成功',
          type: 'success',
        })
      } else if (item == 2) {
        ElMessage({
          message: '重置成功',
          type: 'success',
        })
        type.value = null
      }
    }
  })
}
/*onMounted(() => {
  get_customer_list()
})*/
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  get_customer_list()
}

//分配 share 组织
const shareOpen = () => {
  if (multipleDate.length > 0) {
    if (multipleDate.length == 1) {
      statusType.value = 1
      dialogVisible1.value = true
    } else {
      ElMessage({
        message: '只能选择一条客户分配组织',
        type: 'warning',
      })
    }

  } else {
    ElMessage({
      message: '请先选择客户',
      type: 'warning',
    })
  }
}
//分配 share 客户分组
const customGroupingOpen = () => {
  if (multipleDate.length > 0) {
    statusType.value = 2
    dialogVisible.value = true
  } else {
    ElMessage({
      message: '请先选择客户',
      type: 'warning',
    })
  }
}
//分配 share 客户分类
const customClassifyOpen = () => {
  if (multipleDate.length > 0) {
    statusType.value = 3
    dialogVisible.value = true
  } else {
    ElMessage({
      message: '请先选择客户',
      type: 'warning',
    })
  }
}
//更新
const renew = () => {
  if (multipleDate.length == 1) {
    router.push(`/customer/addCustomer?id=${multipleDate[0].uid}&type=2&status=1`)
  } else if (multipleDate.length == 0) {
    ElMessage({
      message: '请先选择要分配数据',
      type: 'warning',
    })
  } else if (multipleDate.length > 1) {
    ElMessage({
      message: '只能选择一条客户更新',
      type: 'warning',
    })
  }
  // 清空多选
  // multipleTableRef.value?.clearSelection()
}
// 复制
const copy = () => {
  if (multipleDate.length == 1) {
    router.push(`/customer/addCustomer?id=${multipleDate[0].uid}&type=1&status=1`)
  } else if (multipleDate.length == 0) {
    ElMessage({
      message: '请先选择要复制客户',
      type: 'warning',
    })
  } else if (multipleDate.length > 1) {
    ElMessage({
      message: '只能复制一条客户创建',
      type: 'warning',
    })
  }
}
const create = () => {
  // store_list.set_storage(99999)
  router.push('/customer/addCustomer?id=0&type=0&status=1')
}
watch(statusType, () => {
  if (statusType.value == 0) {
    currentPage.value = 1
    pageSize.value = 20
    get_customer_list()
  }
})
// 查询
watch(typeNumber_1, () => {
  if (type.value !== null) {
    currentPage.value = 1
    pageSize.value = 20
    get_customer_list(type.value)
  }
})
// 重置
watch(typeNumber_2, () => {
  if (type.value !== null) {
    currentPage.value = 1
    pageSize.value = 20
    get_customer_list(type.value)
  }
})
/*  onUpdated(()=>{
    console.log('更新')
  })*/
// <****************** keepAlive  跳转更新 **********>
  onActivated(()=>{
    get_list()
    get_customer_list()
  })
// 详情
const info_list = (list: any) => {
  if (list.status == 0) {
    router.push(`/customer/addCustomer?id=${list.uid}&type=3&status=${list.status}`)
  } else {
    router.push(`/customer/addCustomer?id=${list.uid}&type=4&status=${list.status}`)
  }
}
// 使用组织
const organizationList = ref<any>([])
//客户类别
const customer_category = ref<any>([])
// 币别
const currency = ref<any>([])
//付款方式
const settle_type = ref<any>([])
//发票类型
const invoice_type = ref<any>([])
//开户国家
const account_country = ref<any>([])
//结算方式
const settlement_type = ref<any>([])
//客户分组
const customerGroupList = ref<any>([])
/*onMounted(() => {
  get_list()
})*/
const get_list = () => {
  organization_list({}).then((data: any) => {
    // console.log(data,'使用组织')
    if (data.code == 200) {
      organizationList.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
  options_list({ module: 'customer_category' }).then((data: any) => {
    // console.log(data,'客户类别')
    if (data.code == 200) {
      customer_category.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
  options_list({ module: 'currency' }).then((data: any) => {
    // console.log(data,'币别')
    if (data.code == 200) {
      currency.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
  options_list({ module: 'settle_type' }).then((data: any) => {
    // console.log(data,'付款方式')
    if (data.code == 200) {
      settle_type.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
  options_list({ module: 'invoice_type' }).then((data: any) => {
    // console.log(data,'发票类型')
    if (data.code == 200) {
      invoice_type.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
  options_list({ module: 'account_country' }).then((data: any) => {
    // console.log(data,'开户国家')
    if (data.code == 200) {
      account_country.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
  options_list({ module: 'settlement_type' }).then((data: any) => {
    // console.log(data,'结算方式')
    if (data.code == 200) {
      settlement_type.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
  customerGroup_list({}).then((data: any) => {
    // console.log(data,'客户分组')
    if (data.code == 200) {
      customerGroupList.value = data.data?.map((i: any) => { return { value: i.uid, label: i.name } }) || []
    }
  })
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
